<template>
  <div class="app-container">
      所有教师学生分配
    <el-row type="flex" class="row-bg" justify="center" :gutter="20">
      <el-col :span="12">
      <el-input
      placeholder="请输入姓名"
      prefix-icon="el-icon-search" clearable v-model="param.searchName">
      </el-input>
      </el-col>
      <el-col :span="4">
    <el-button icon="el-icon-search" circle @click="getTeachList"></el-button>
      </el-col>
    </el-row>
    <el-button type="primary" @click="getDistributData">自动分配</el-button>
    <el-row>
    <el-table :data="teacheList" style="width: 100%;margin-top:30px;" border>
      <el-table-column align="center" label="账号" width="80">
        <template slot-scope="scope">
          {{ scope.row.userAccount }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="姓名" width="220">
        <template slot-scope="scope">
          {{ scope.row.userName }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="已分配学生数量">
        <template slot-scope="scope">
          {{ scope.row.studentCount }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="getStudent(scope.row)">已分配详情</el-button>
          <el-button type="primary" size="small" @click="getStudentList(scope.row)">分配指导学生</el-button>
        </template>
      </el-table-column>
      
    </el-table>
    </el-row>
    <!--分页组件-->
    <el-pagination background layout="prev, pager, next"  prev-text="上一页"
                  next-text="下一页"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page.sync="currpage"
                  :page-size="pageSize"
                  :total="total">
     </el-pagination>
    <el-dialog title="自动分配" :visible.sync="dialogFormVisible">
        系统学生总数：{{autuParams.allStudentCount}}
        系统教师总数：{{autuParams.teachCount}}<br>
        已分配导师学生总数：{{autuParams.studentTutorCount}}
        未分配导师学生总数：{{autuParams.studentCount}}<br>
        平均每个教师指导学生数:{{autuParams.average}}<br>
        <el-button type="primary" @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="autuDistribut">确认</el-button>
    </el-dialog>

 <el-dialog title="待分配学生" :visible.sync="dialogTableVisible">
          <el-input
          placeholder="请输入姓名"
          prefix-icon="el-icon-search" clearable v-model="studentParams.studentName">
          </el-input>
          <el-button icon="el-icon-search" circle @click="getStudentList"></el-button>
          <el-table ref="multipleTable" :data="noStudentList">
            <el-table-column type="selection"  width="50"></el-table-column>
            <el-table-column property="studentAccount" label="学号" width="150"></el-table-column>
            <el-table-column property="studentName" label="姓名" width="50"></el-table-column>
            <el-table-column property="class" label="班级" width="150" ></el-table-column>
          </el-table>
            <!--分页组件-->
          <el-pagination background layout="prev, pager, next"  prev-text="上一页"
                  next-text="下一页"
                  @size-change="handleSizeChange2"
                  @current-change="handleCurrentChange2"
                  :current-page.sync="currpage2"
                  :page-size="pageSize2"
                  :total="total2">
            </el-pagination>
          <el-button type="primary" @click="dialogTableVisible = false">取消</el-button>
          <el-button type="primary" @click="choiceStudent">确定</el-button>
  </el-dialog>
  <el-dialog title="已分配学生" :visible.sync="alreadyVisible">
          <el-input
          placeholder="请输入姓名"
          prefix-icon="el-icon-search" clearable v-model="myStudentParam.studentName">
          </el-input>
          <el-button icon="el-icon-search" circle @click="getMyStudent()"></el-button>
          <el-table ref="multipleTable" :data="myStudentList">
            <el-table-column type="selection"  width="50"></el-table-column>
            <el-table-column property="studentAccount" label="学号" width="150"></el-table-column>
            <el-table-column property="studentName" label="姓名" width="50"></el-table-column>
            <el-table-column property="class" label="班级" width="150" ></el-table-column>
          </el-table>
            <!--分页组件-->
          <el-pagination background layout="prev, pager, next"  prev-text="上一页"
                  next-text="下一页"
                  @size-change="handleSizeChange3"
                  @current-change="handleCurrentChange3"
                  :current-page.sync="currpage3"
                  :page-size="pageSize3"
                  :total="total3">
            </el-pagination>
          <el-button type="primary" @click="alreadyVisible = false">取消</el-button>
          <el-button type="primary" @click="alreadyVisible = false">确定</el-button>
  </el-dialog>
  </div>
</template>

<script>
import {getTeachList,autuDistribut,getDistributData,getStudent} from '@/api/tutor'
import {getStudentList} from '@/api/user'
import { deepClone } from '@/utils'


export default {
  data() {
    return {
     teacheList:[],
      param :{
      start: 0,
      limit: 10,
      searchName:''
      },
      pageSize: 10, //每一页的数据大小
      pageSize2:10,
      currpage: 1, //当前页
      currpage2:1,
      total:0,//总条数
      total2:0,
      dialogFormVisible:false,
      dialogTableVisible:false,
      autuParams:{
          studentCount:'',
          teachCount:'',
          studentTutorCount:'',
          average:''
      },
      noStudentList:[],
      studentParams:{
        start: 0,
        limit: 10,
        studentName:''
      },
       choiceParams:{
        teachAccount:'',
        choices:[]
      },
      alreadyVisible:false,
      myStudentList:[],
      total3:0,
      pageSize3:10,
      currpage3:1,
      myStudentParam :{
      start: 0,
      limit: 10,
      teachAccount:'',
      studentName:''
      },
    }
  },
  //页面打开时执行的方法
  created() {
    this.getTeachList()
  },
  methods: {
    async getTeachList() {
      let res = await getTeachList(this.param)
      this.teacheList = res.beans
      this.total = res.bean.total
    },
    //页大小变化
     handleSizeChange(val) {
      this.pageSize = val;
      this.param.start = this.pageSize*(this.currpage-1)
      this.getTeachList();
    },
    //页标号变化
    handleCurrentChange(val) {
      this.currpage = val;
      this.param.start = this.pageSize*(this.currpage-1)
      this.getTeachList();
    },
    async getDistributData(){
        this.dialogFormVisible = true
        let res = await getDistributData()
        this.autuParams = deepClone(res.bean)
    },
    async autuDistribut(){//自动分配学生
        let res = await autuDistribut(this.param).then(()=>{
            this.$message({
              type: 'success',
              message: '分配成功!'
            })
            this.dialogFormVisible = false;
            }
          ).catch(err=>{
            this.$message({
              type: 'success',
              message: '分配失败!'
            })
            })
    },
       //页大小变化
     handleSizeChange2(val) {
      this.pageSize2 = val;
      this.studentParams.start = this.pageSize2*(this.currpage2-1)
      this.getUserList();
    },
    //页标号变化
    handleCurrentChange2(val) {
      this.currpage2 = val;
      this.studentParams.start = this.pageSize2*(this.currpage2-1)
      this.getUserList();
    },
    async getStudentList(row){
      this.dialogTableVisible = true;
      this.choiceParams.teachAccount = row.userAccount
      let res = await getStudentList(this.studentParams)
      this.noStudentList = res.beans
      this.total2 = res.bean.total
    },
    async choiceStudent(){
       this.choiceParams.choices = this.$refs.multipleTable.selection;
      let res = await choiceStudent(this.choiceParams).then(()=>{
            this.$message({
              type: 'success',
              message: '分配成功!'
            })
            this.dialogTableVisible = false;
            }
          ).catch(err=>{
            this.$message({
              type: 'success',
              message: '分配失败!'
            })
            })
    },
    //查询已分配详情
    async getStudent(row) {
      this.alreadyVisible = true
      this.myStudentParam.teachAccount = row.userAccount
      this.getMyStudent()
    },
    async getMyStudent() {
      let res = await getStudent(this.myStudentParam)
      this.myStudentList = res.beans
      this.total3 = res.bean.total
    },
    //页大小变化
     handleSizeChange3(val) {
      this.pageSize3 = val;
      this.myStudentParam.start = this.pageSize3*(this.currpage3-1)
      this.getTeachList();
    },
    //页标号变化
    handleCurrentChange3(val) {
      this.currpage3 = val;
      this.myStudentParam.start = this.pageSize3*(this.currpage3-1)
      this.getUserList();
    },
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
